<template>
  <div class="login">
    <div class="center">
      <div class="text1">系统登录</div>

      <el-form
        :model="fromData"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="text">
          <el-input v-model="fromData.text">
            <i slot="prefix" class="iconfont icon-denglu"></i>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="fromData.password"
            :type="falg ? 'text' : 'password'"
            prefix-icon="iconfont icon-ai-password"
          >
            <i
              slot="suffix"
              class="iconfont"
              :class="falg ? 'icon-yanjing' : 'icon-biyanjing'"
              @click="changEyes()"
            ></i>
          </el-input>
        </el-form-item>

        <el-button type="primary" @click="loginBtn()">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { checkLogin } from "../../api/user";
export default {
  data() {
    const Btn = (rule, value, callback) => {
      // 非空验证
      if (!value) {
        callback(new Error("请输入正确的账号"));
        return;
      }
      //  验证长度
      // let reg =/^/
      if (!value.length > 6 && !value.length < 12) {
        callback(new Error("长度必须6-12"));
      }
      let reg = /^[\u4e00-\u9fa5A-Za-z0-9]{4,12}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的密码"));
      }
    };
    return {
      falg: false,
      fromData: {
        password: "",
        text: "",
      },
      rules: {
        text: [
          {
            validator: Btn,
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入正确的密码", trigger: "blur" },
          {
            min: 4,
            max: 12,
            message: "长度在 4 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    loginBtn() {
      // valid  验证是否通过 ruleFrom就是from表单的属性  ref="ruleFrom"
      this.$refs.ruleForm.validate((valid) => {
        let data = {
          account: this.fromData.text,
          password: this.fromData.password,
        };
        // 请求ajax的地址
        if (valid) {
          checkLogin(data).then((res) => {
            console.log(res);
            console.log(12345);
            let { code, id, msg, role, token } = res.data;
            localStorage.setItem("user", JSON.stringify({ id, role, token }));
            this.$router.push("/home");
            if (code === 0) {
              this.$message({
                message: msg,
                type: "success",
              });
            }else{
               this.$message.error(msg);
            }
          });
        }
      });
    },
  },
  changEyes() {
    this.falg = !this.falg;
  },
};
</script>

<style lang="less" scoped>
.login {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #2a3b4d;
}
.center {
  width: 40rem;
  color: #fff;
  .text1 {
    text-align: center;
    font-size: 2rem;
  }
}
.el-input {
  margin-top: 2rem;
}
.iconfont {
  text-align: center;
  line-height: 2.8rem;
  font-size: 1rem;
}
.el-button {
  width: 40rem;
  margin-top: 2rem;
}
/deep/.el-input__inner {
  background: transparent;
}
</style>